<template>
  <div class="attribute-page flex flex-col">
    <a-card class="mb-2.5">
      <common-form
        :model="state.queryForm"
        name="form"
        @query="handleQuery"
        @add="handleAdd"
        @reset="handleReset"
      >
        <a-form-item label="属性名" name="attributeName" class="w-1/2.5">
          <a-input v-model:value="state.queryForm.attributeName" />
        </a-form-item>
        <a-form-item label="属性值" name="attributeValue" class="w-1/2.5">
          <a-input v-model:value="state.queryForm.attributeValue" />
        </a-form-item>
      </common-form>
    </a-card>
    <a-card class="flex-1 card-table"></a-card>
  </div>
</template>

<script setup lang="ts" name="ErpMaterialAttribute">
import { ref, reactive, onMounted } from "vue";
import CommonForm from "@/components/common-form/index.vue";
import CommonTable from "@/components/common-table/index.vue";
import type { FormInstance } from "ant-design-vue";
import { getMaterialAttributeListApi } from "@/api/erp/material";
import type { ResType } from "@/api/types";
import type { TableParamsResType } from "@/views/system/onlineUser/type";

const formRef = ref<FormInstance>();

const state = reactive({
  queryForm: {} as any,
  tableData: [] as any[],
  tableParams: {
    page: 1,
    pageSize: 50,
    total: 0 as any,
  },
  formState: {} as any,
  loading: false,
  isShow: false,
  isEdit: false,
});

const handleQuery = async () => {
  state.loading = true;
  const params = Object.assign(state.queryForm,state.tableParams)
  const res:ResType<TableParamsResType<any>> = await getMaterialAttributeListApi(params);
  state.tableData = res.data.result.items ?? []
  state.tableParams.total = state.tableData.length
  state.loading = false;
};
const handleAdd = async () => {};
const handleReset = async () => {};

onMounted(async()=>{
  await handleQuery()
})
</script>

<style lang="scss" scoped>
.attribute-page {
  .card-table {
    :deep(.ant-card-body) {
      height: 100%;
    }
  }
}

:deep(.ant-table-cell-fix-right) {
  // right: 0 !important;
}

:deep(.ant-btn > span) {
  display: inline-flex !important;
}
</style>
